<template>
  <div class="base-content">
    <div class="basic-info">
      <el-form ref="queryForm" :inline="true" :model="queryForm">
        <el-form-item
          :label="sysBusinessDetectionItem.detectionItemName"
          prop="detectionItemName"
        >
          <el-input
            v-model="queryForm.detectionItemName"
            :placeholder="sysBusinessDetectionItem.detectionItemName"
          />
        </el-form-item>
        <el-form-item
          :label="sysBusinessDetectionItem.capacityRange"
          prop="scopeAccreditation"
        >
          <el-select
            v-model="queryForm.scopeAccreditation"
            :placeholder="sysBusinessDetectionItem.capacityRange"
          >
            <el-option
              v-for="item in scopeAccreditationOptions"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="onQuery">{{
            operateType.query
          }}</el-button>
          <el-button @click="cancelForm">{{ operateType.clear }}</el-button>
        </el-form-item>
      </el-form>

      <!--操作栏-->
      <div class="base-content-operate">
        <el-button
          v-rights="'Add'"
          icon="el-icon-plus"
          type="primary"
          @click="onNew"
          >{{ operateType.add }}</el-button
        >
        <el-button
          v-rights="'Import'"
          icon="el-icon-document-copy"
          type="primary"
          @click="importData"
          >{{ operateType.import }}</el-button
        >

        <!-- <el-button
          icon="el-icon-document-copy"
          type="primary"
          @click="importData"
          >导入</el-button
        >

        <el-button
          icon="el-icon-document-copy"
          type="primary"
          @click="importData"
          >导出</el-button
        > -->
      </div>

      <div class="main-layout">
        <!--台账-->
        <div class="sideBar-left">
          <p class="sideBar-title">{{ sysBusinessDetectionItem.sampleList }}</p>
          <el-input
            v-model="filterText"
            :placeholder="sysBusinessDetectionItem.enterKeywordsFiltering"
            style="width: 230px"
          ></el-input>

          <el-tree
            ref="tree"
            style="width: 250px"
            :filter-node-method="filterNode"
            class="customer-tree"
            :data="treeData"
            @node-click="handleNodeClick"
          >
            <span
              slot-scope="{ node, data }"
              class="custom-tree-node showname"
              :title="node.label"
            >
              <span>
                <i v-show="data.isSampLing" class="el-icon-document"></i>
                <i v-show="!data.isSampLing" class="el-icon-folder-opened"></i>
                {{ node.label }}
              </span>
            </span>
          </el-tree>
        </div>
        <!-- 采样点列表 -->
        <div class="sideBar-right">
          <div class="child-table">
            <!--列表-->
            <el-table
              :data="list"
              element-loading-text="Loading"
              tooltip-effect="dark"
              height="calc(100% - 30px)"
            >
              <el-table-column
                align="center"
                :label="sysBusinessDetectionItem.serialNumber"
                width="50"
              >
                <template slot-scope="scope">
                  {{ scope.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column :label="sysBusinessDetectionItem.sampleCategory">
                <template slot-scope="scope">
                  {{ scope.row.sampleCategory.sampleCategoryName }}
                </template>
              </el-table-column>
              <el-table-column :label="sysBusinessDetectionItem.testingItems">
                <template slot-scope="scope">
                  {{ scope.row.detectionItemName }}
                </template>
              </el-table-column>
              <el-table-column
                :label="sysBusinessDetectionItem.projectSubItems"
              >
                <template slot-scope="scope">
                  {{ scope.row.sysBusinessDetectionItemSonName }}
                </template>
              </el-table-column>
              <el-table-column
                :label="sysBusinessDetectionItem.methodStandardNumber"
              >
                <template slot-scope="scope">
                  {{ scope.row.methodStandard }}
                </template>
              </el-table-column>
              <el-table-column
                :label="sysBusinessDetectionItem.methodStandardName"
              >
                <template slot-scope="scope">
                  {{ scope.row.methodStandardName }}
                </template>
              </el-table-column>
              <el-table-column
                :label="sysBusinessDetectionItem.productStandards"
              >
                <template slot-scope="scope">
                  {{ scope.row.productStandardName }}
                </template>
              </el-table-column>
              <el-table-column :label="sysBusinessDetectionItem.capacityRange">
                <template slot-scope="scope">
                  {{ scope.row.scopeAccreditationName }}
                </template>
              </el-table-column>
              <el-table-column
                :label="sysBusinessDetectionItem.detectionPersonnel"
              >
                <template slot-scope="scope">
                  {{ scope.row.detectionPeopleLabel }}
                </template>
              </el-table-column>

              <el-table-column :label="operateType.action">
                <template slot-scope="scope">
                  <div class="base-table-operation">
                    <el-link
                      v-rights="'Edit'"
                      size="mini"
                      type="primary"
                      @click="handleEdit(scope.row)"
                      >{{ operateType.redact }}</el-link
                    >
                    <el-link
                      v-rights="'Delete'"
                      size="mini"
                      type="danger"
                      @click="handleDelete(scope.row)"
                      >{{ operateType.delete }}</el-link
                    >
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>

          <BasePagination
            v-if="refesh"
            :total="pagination.total"
            :page-index="pagination.pageIndex"
            :page-size="pagination.pageSize"
            @sizeChange="sizeChange"
            @changePage="currentChange"
          />
          <SysBusinessDetectionItemEdit
            v-if="dialogFormVisible"
            ref="SysBusinessDetectionItemEdit"
            :dialog-form-visible.sync="dialogFormVisible"
            :sys-business-sample-category-id.sync="sysBusinessSampleCategoryId"
            :edit-id.sync="editId"
            :tree-data.sync="treeData"
          />
        </div>
        <BusinessImportData
          v-if="dialogVisible"
          ref="BusinessImportData"
          :dialog-visible.sync="dialogVisible"
          :sys-business-import-type.sync="sysBusinessImportType"
          @load="getList"
        />
      </div>
      <!--筛选条件-->

      <!-- <report v-model="isShowReportDialog" :edit-item="editItem" /> -->
    </div>
  </div>
</template>

<script>
import {
  deleteRecord,
  getList,
} from "../../../../api/DetectionItemManage/SysBusinessDetectionItem.js";
import { getDictList } from "../../../../api/System/SystemDict";
import BusinessImportData from "../../../../components/SysBusinessImportDialog.vue";
import { getSampleTree } from "../../../../api/DetectionItemManage/SysBusinessSampleCategory.js";
import SysBusinessDetectionItemEdit from "./SysBusinessDetectionItemEdit.vue";
export default {
  name: "SysBusinessDetectionItemList",
  components: { SysBusinessDetectionItemEdit, BusinessImportData },
  data() {
    return {
      refesh: true,
      sysBusinessImportType: "3",
      dialogVisible: false,
      filterText: "",
      treeData: [],
      loading: true,
      list: [],
      sysBusinessSampleCategoryId: "",
      scopeAccreditationOptions: [],
      queryForm: {
        scopeAccreditation: "0",
        parentId: 0,
        productStandardId: 0,
        sysBusinessSampleCategoryId: 0,
        num: "",
        detectionItemName: "",
        anotherName: "",
        detectionObject: "",
        parameterName: "",
        standardMethod: "",
        detectionMethod: "",
        restrictRange: "",
        explain: "",
        detectionItemType: "",
        restrict: "",
        agreementPrice: 0,
        firstAgreementPrice: 0,
        secondAgreementPrice: 0,
        thirdAgreementPrice: 0,
        unitSymbol: "",
        decisionSymbol: "",
        qualityIndex: "",
        methodStandard: "",
        methodStandardName: "",
      },
      dialogFormVisible: false,
      pagination: {
        pageIndex: 1,
        pageSize: 10,
        total: 0,
      },
      editId: "",
    };
  },
  computed: {
    operateType() {
      return this.$t("ModuleSysBusiness.OperateType") || {};
    },
    sysBusinessDetectionItem() {
      return this.$t("SysBusinessDetectionItem") || {};
    },
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  created() {
    // 认证认可范围
    getDictList({ dictCode: "ScopeAccreditation" }).then((res) => {
      res.data.push({
        value: "0",
        id: "0",
        name: this.$t("ModuleSysBusiness.OperateType.pleaseSelect"),
      });
      this.scopeAccreditationOptions = res.data;
    });

    // 样品类别树
    getSampleTree().then((res) => {
      this.treeData = res.data;
    });

    this.loading = false;
  },
  methods: {
    cancelForm() {
      this.$refs.queryForm.resetFields();
      if (this.queryForm.sysBusinessSampleCategoryId !== 0) {
        this.getList();
      } else {
        this.list = [];
        this.pagination.total = 0;
      }
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.unitName.indexOf(value) !== -1;
    },
    // 导入
    importData() {
      this.dialogVisible = true;
    },
    currentChange(val) {
      this.pagination.pageIndex = val;
      this.getList();
    },
    sizeChange(val) {
      this.pagination.pageIndex = 1;
      this.pagination.pageSize = val;
      this.getList();
    },
    getList() {
      this.loading = true;
      getList(this.queryForm, this.pagination)
        .then((res) => {
          this.list = res.data.dataList ? res.data.dataList : [];
          this.pagination.total = res.data.total;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    onNew() {
      this.dialogFormVisible = true;
    },
    handleDelete(rowData) {
      this.Helper.deleteConfirm(() => {
        this.loading = true;
        deleteRecord({ id: rowData.id })
          .then((res) => {
            this.getList();
            this.loading = false;
          })
          .catch(() => {
            this.loading = false;
          });
      });
    },
    handleEdit(rowData) {
      this.editId = rowData.id;
      this.dialogFormVisible = true;
    },
    onQuery() {
      this.getList();
    },
    handleNodeClick(data) {
      this.refesh = false;
      this.pagination.pageIndex = 1;
      this.pagination.pageSize = 10;
      this.$nextTick(() => {
        this.refesh = true;
      });
      this.queryForm.sysBusinessSampleCategoryId = data.id;
      this.sysBusinessSampleCategoryId = data.id;
      this.getList();
    },
  },
};
</script>

<style lang="scss" >
.showname {
  width: 63px; // 定宽
  overflow: hidden !important; // 溢出部分隐藏
  white-space: nowrap !important; //禁止自动换行
  text-overflow: ellipsis !important; // 使溢出部分以省略号显示
  display: block !important;
}
.DetectionItem-menu-content {
  padding: 0;
  background: #f8fbff;
  display: flex;
  align-items: flex-start;
  .menu-tree {
    width: 290px;
    height: 100%;
    overflow: auto;
    .menu-tree-header {
      width: 100%;
      padding: 16px 12px 12px;
      box-sizing: border-box;
      color: #4e4e4e;
      display: flex;
      align-items: center;
      & > span {
        font-size: 14px;
        font-weight: 600;
        display: block;
        margin-right: 12px;
      }
    }
    .el-tree {
      height: calc(100% - 64px);
      overflow: auto;
    }
  }
  .menu-detail {
    width: calc(100% - 260px);
    height: 100%;
    background: #fff;
    padding: 20px 0 20px 20px;
    overflow-y: auto;
    box-sizing: border-box;
    position: relative;
    display: block;
    align-items: flex-start;
    .menu-content {
      width: 50%;
      border-right: 1px #dedede solid;
    }
    .empty {
      height: calc(100% - 40px);
    }
    .menu-operation {
      width: 50%;
      padding: 0 24px;
      box-sizing: border-box;
    }
  }
  .customer-tree {
    text-overflow: ellipsis !important;
    background: #f8fbff;
    .el-tree-node__content {
      height: 40px;
      line-height: 40px;
      &:hover {
        color: #4787ff;
        background: rgba(47, 113, 245, 0.2);
      }
      .el-tree-node__label {
        font-size: 12px;
      }
      .el-tree-node__expand-icon {
        font-size: 16px;
        font-weight: bold;
        color: #999;
      }
      .is-leaf {
        color: transparent;
      }
    }
    .is-current {
      & > .el-tree-node__content {
        .el-tree-node__label {
          color: #4787ff;
          font-weight: 600;
        }
        .el-tree-node__expand-icon {
          color: #4787ff;
        }
        .is-leaf {
          color: transparent;
        }
      }
    }
  }
  .menu-form {
    margin-top: 32px;
    .el-form-item--small {
      margin-right: 24px;
    }
    .el-select {
      width: 100%;
    }
  }
}
</style>
